<template>
  <MyModal ref="myModal" title="验证码" :top="35">
    <template #content>
      <div style="display: flex; justify-content: center">
        <div ref="captchaRef"></div>
      </div>
    </template>
  </MyModal>
</template>

<script setup>
import { ref } from 'vue'

const myModal = ref()

const emit = defineEmits(['onSuccessfully'])

const captchaRef = ref(null)

// 开启
const callbackFn = visible => {
  setTimeout(() => {
    return new Promise((resolve, reject) => {
      myModal.value?.showModal()

      _dx.Captcha(captchaRef.value, {
        appId: 'dca0d106a489a96381a9609737f502b8',
        success: token => {
          resolve({ token })
          myModal.value?.cancelModal()
          emit('onSuccessfully', token)
        },
      })
    })
  }, 1000)
}

defineExpose({
  callbackFn,
})
</script>

<style scoped>
v-deep.el-dialog__header {
  padding: 0 !important;
}

.el-dialog__body {
  padding-top: 0;
}
</style>
